import { useContext } from "react";
import { AppContext } from "../../../core";
import { Tabs } from "antd";
import styles from './SidePanel.module.less'

export interface ISidePanelProps {
    items: {
        label: string
        key: string
    }[]
}

export const SidePanel = ({items}: ISidePanelProps) => {
    const { slots } = useContext(AppContext);

    return <div className={styles.sidePanel}>
        <Tabs items={items.map(item => {
            const tabPanel = slots.sidePanel.find(module => module.props?.tab === item.key)
            console.log('tabPanel', tabPanel)
            const ComponentElement = tabPanel!.component as React.ComponentType<unknown>;
            return {
                ...item,
                children: <ComponentElement />
            }
        })} />
    </div>
}